<template>
  <div style="height:100%;">
    <loading text="加载中" :show="isLoading" position="absolute" class="AppLoading"></loading>
    <view-box v-ref:view-box>
      <!--default slot-->
      <div style="height: 100%;">
        <router-view :transition="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')"></router-view>
      </div>
      <!--<div style="height: 1rem;"></div>-->
      <!--bottom slot-->
      <tabbar class="vux-demo-tabbar" icon-class="vux-center" v-show="isTabbarPage" slot="bottom">
        <tabbar-item @click="toHome" :selected="isIndexPage">
          <div slot="icon" class="tab-item-img tab-img-home"></div>
          <span slot="label">点餐</span>
        </tabbar-item>
        <!--<tabbar-item v-link="{path:'/tabbar/mall'}" :selected="route.path === '/tabbar/mall'">
          <div slot="icon" class="tab-item-img tab-img-shop"></div>
          <span slot="label">商城</span>
        </tabbar-item>-->
        <tabbar-item @click="toPersonal" :selected="isPersonalPage">
          <div slot="icon" class="tab-item-img tab-img-mine"></div>
          <span slot="label">我的</span>
        </tabbar-item>
      </tabbar>
    </view-box>
  </div>
</template>

<script>
import store from './vuex/store'
import { route, isLoading, direction } from './vuex/getters.js'
import { update_loading, update_direction } from './vuex/actions.js'
import { Tabbar, TabbarItem, Loading, ViewBox, XHeader } from './components'

export default {
  name: 'app',
  components: {
    Tabbar,
    TabbarItem,
    Loading,
    ViewBox,
    XHeader
  },
  store: store,
  vuex: {
    getters: {
      isLoading,
      direction
    },
    actions: {
      update_loading,
      update_direction
    }
  },
  data () {
    return {
      routerTransition: {
        forward: 'slideRL',
        back: 'slideLR',
        firstStatus: false,
        secondStatus: false
      },
      route: this.$route
    }
  },
  created: function() {
    //this.isFirstPage()
    //this.isSecondPage()
  },
  methods: {
    scrollTop () {
      this.$refs.viewBox.$els.viewBoxBody.scrollTop = 0
    },
    toHome(){
        //v-link="{path: '/'}"
      this.$router.replace({path: '/'})
    },
    toPersonal(){
        // v-link="{path:'/tabbar/personal'}"
      this.$router.replace({path: '/tabbar/personal'})
    }
  },
  computed: {
    isIndexPage () {
      return this.$route.path === '/' || (this.$route.path).indexOf('/?openid') >= 0
    },
    isPersonalPage () {
      return /tabbar/.test(this.$route.path) && /personal/.test(this.$route.path)
    },
    isTabbarPage () {
      this.firstStatus = false
      if (this.$route.path === '/' || (this.$route.path).indexOf('/?openid') >= 0) {
        this.firstStatus = true
      }
      this.secondStatus = false
      if (/tabbar/.test(this.$route.path) && /personal/.test(this.$route.path)) {
        this.secondStatus = true
      }
      var result = false
      if (this.$route.path === '/' || /tabbar/.test(this.$route.path) || (this.$route.path).indexOf('/?openid') >= 0) {
        result = true
      }
      return result
    }
  }
}
</script>

<style lang="less">
@import 'styles/index.less';
@import './styles/weui/base/reset';

/* v-r-transition, default is {forward: 'forward', back: 'back'}*/
.forward-enter, .forward-leave {
  transform: translate3d(-100%, 0, 0);
}
.back-enter, .back-leave {
  transform: translate3d(100%, 0, 0);
}
.vux-demo-tabbar-component {
  background-color: #F70968;
  color: #fff;
  border-radius: 7px;
  padding: 0 4px;
  line-height: 14px;
}
.weui_tabbar_icon + .weui_tabbar_label {
  margin-top: 0!important;
  font-size: 1.2rem;
  line-height: 1.4rem;
}
.vux-demo-header-box {
  z-index: 100;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.AppLoading .weui_toast {
    top: 18rem !important;
    left: 50%  !important;
    bottom: auto;
}
.weui_tab {
  background: #fff;
}

.weui_tab_bd {
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 0;
}

.weui_tabbar.vux-demo-tabbar {
      background: rgba(247, 247, 250, 1);
}

button.weui_btn {
  font-family: "微软雅黑";
  font-size: 1.3rem;
  line-height: 3.5rem;
}
.weui_cells_title {
  font-family: "微软雅黑";
  font-size: 1.4rem;
}
.weui_cell_bd {
  font-family: "微软雅黑";
  font-size: 1.5rem;
}
.weui_toast_text .weui_toast_content {
  font-family: "微软雅黑";
}
/**
* vue-router transition
*/
.vux-pop-out-transition,
.vux-pop-in-transition {
  width: 100%;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  backface-visibility: hidden;
}
.vux-pop-out-enter,
.vux-pop-out-leave,
.vux-pop-in-enter,
.vux-pop-in-leave {
  will-change: transform;
  height: 100%;
  position: absolute;
  left: 0;
}
.vux-pop-out-enter {
  animation-name: popInLeft;
}
.vux-pop-out-leave {
  animation-name: popOutRight;
}
.vux-pop-in-enter {
  perspective: 1000;
  animation-name: popInRight;
}
.vux-pop-in-leave {
  animation-name: popOutLeft;
}
@keyframes popInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes popOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes popInRight {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes popOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
.tab-img-home{
  background:url('http://static.52letsgo.cn/zz/wechatimg/ic_home_unselect.png');
}
.tab-img-shop{
  background:url('http://static.52letsgo.cn/zz/wechatimg/ic_mall_unselected.png');
}
.tab-img-mine{
  background:url('http://static.52letsgo.cn/zz/wechatimg/ic_user_unselect.png');
}
.weui_bar_item_on .tab-img-home{
  background:url('http://static.52letsgo.cn/zz/wechatimg/ic_home_select.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.weui_bar_item_on .tab-img-shop{
  background:url('http://static.52letsgo.cn/zz/wechatimg/ic_mall_selected.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.weui_bar_item_on .tab-img-mine{
  background:url('http://static.52letsgo.cn/zz/wechatimg/ic_user_select.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.weui_bar_item_on span{
  color: orange;
}
.weui_tabbar_item {
  font-family: "Microsoft Yahei";
  padding: .4rem 0 .4rem 0;
}
.tab-item-img{
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>
